<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router'
import $api from '@/api'
import { ref, watch,computed } from 'vue'
import { useStore } from 'vuex'
import useToast from '@/hooks/useToast'
const $route=useRoute(),$router=useRouter(),$store=useStore(),carts=ref([]),total=ref(0),freight=ref(0),amount=computed(() =>total.value-freight.value)
const address=computed(() =>$store.getters['user/getAddress'])
function getCartsByIDs(){
  let ids=$route.query.ids
  if(typeof ids=='string') ids=[ids]
  const {data}=$api.cart.getByIDs(ids)
  watch(data,(_data:Array<any>) =>{
    carts.value=_data
    total.value=_data.reduce((acc,curr,idx) =>acc+curr.price*curr.count,0)
  })
}
//提交订单
function submitOrder() {
  const {data}=$api.order.add({
    total_fee:total.value,
    address_id:address.value.id,
    sku_ids:carts.value.map(item =>item.sku_id),
    goods_ids:carts.value.map(item =>item.goods_id),
    counts:carts.value.map(item =>item.count),
    status:1,
    is_refund:false
  })
  watch(data,(_data:string) =>{
    useToast('创建成功')
    $router.push({
      path:'/orders/pay',
      query:{
        id:_data
      }
    })
  })
}
getCartsByIDs()
</script>

<template>
  <div
    w:bg="blue-gray-100"
    w:p="4"
  >
    <div @click="$router.push('/settings/addresschoose')"
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:p="4"
      w:bg="white"
      w:m="b-4"
    >
      <div>
        <div
          w:flex="~ nowrap"
          w:align="items-center"
        >
          <div v-if="address.isDefault"
            w:bg="red-600"
            w:text="xs white"
            w:p="2"
            w:m="r-4"
          >默认</div>
          <div>{{address.city}}</div>  
        </div>
        <div
          w:font="bold"
          w:text="3xl"
          w:m="y-4"
        >{{address.detail}}</div>
        <div
          w:flex="~ nowrap"
          w:align="items-center"
        >
          <div
            w:m="r-12"
          >{{address.name}}</div>
          <div>{{address.mobile}}</div>
        </div>
      </div>
      <div class="iconfont icon-arrow-right"></div>
    </div>
    <div v-for="(item,idx) in carts" :key="item._id"
      w:flex="~ nowrap"
      w:p="4"
      w:bg="white"
      w:m="b-4"
    >
      <img :src="item.goods_thumb"
        w:w="50"
        w:m="r-4"
      />
      <div
        w:flex="1"
      >
        <div>{{item.goods_name}} {{item.sku_name}}</div>
        <div
          w:flex="~ nowrap"
          w:justify="between"
          w:m="t-4"
        >
          <div
            w:text="red-500"
          >
            <span>￥</span>
            <span
              w:text="3xl"
            >{{item.price}}</span>
          </div>
          <div>x {{item.count}}</div>
        </div>
      </div>
    </div>
    <div
      w:bg="white"
      w:p="4"
      w:space="y-4"
    >
      <div
        w:flex="~ nowrap"
        w:justify="between"
      >
        <div>商品金额</div>
        <div>
          <span>￥</span>
          <span>{{total}}</span>
        </div>
      </div>
      <div
        w:flex="~ nowrap"
        w:justify="between"
      >
        <div>运费</div>
        <div>
          <span>￥</span>
          <span>{{freight}}</span>
        </div>
      </div>
      <div
        w:flex="~ nowrap"
        w:justify="end"
      >
        <div>合计:</div>
        <div
          w:text="red-500"
        >
          <span>￥</span>
          <span>{{amount}}</span>
        </div>
      </div>
    </div>
    <div
      w:flex="~ nowrap"
      w:justify="between"
      w:align="items-center"
      w:bg="white"
      w:w="full"
      w:h="24"
      w:p="x-4"
      w:pos="absolute bottom-0 left-0"
    >
      <div
        w:text="red-500"
      >
        <span>￥</span>
        <span
          w:text="4xl"
        >{{amount}}</span>
      </div>
      <div @click="submitOrder"
        w:flex="~"
        w:align="items-center"
        w:justify="center"
        w:bg="red-500"
        w:text="white"
        w:border="rounded-full"
        w:p="y-3 x-10"
      >提交订单</div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>

<route>
{
  meta: {
    title: '填写订单',
    auth: true
  }
}
</route>